<template>
  <div>
    <el-table :data="roles" style="width: 100%">
      <el-table-column prop="rid" label="角色编号" width="180">
      </el-table-column>
      <el-table-column prop="rname" label="角色名称" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="showAllocateMenuDialog(scope.$index, scope.row)"
            >分配菜单</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="分配菜单" :visible.sync="dialogFormVisibleMenu">
      <el-tree
        :data="menus"
        :props="defaultProps"
        show-checkbox
        default-expand-all
        :expand-on-click-node="false"
        node-key="mid"
        :default-checked-keys="menucheckedkeys"
        ref="menutree"
      >
      </el-tree>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleMenu = false">取 消</el-button>
        <el-button type="primary" @click="allocateMenu">分配菜单</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roles: [],
      dialogFormVisibleMenu: false,
      menus: [],
      defaultProps: {
        children: "children",
        label: "mname",
      },
      menucheckedkeys: [],
      rid: 0,
    };
  },
  mounted() {
    this.getAllRoles();
    this.loadMenu();
  },
  methods: {
    allocateMenu() {
      this.dialogFormVisibleMenu = false;
      this.menucheckedkeys = [];
      let rolemenu={rid:this.rid,mids:this.$refs.menutree.getCheckedKeys().concat(this.$refs.menutree.getHalfCheckedKeys())}
      this.$axios.post("/role/addRoleMenu" ,rolemenu).then((resp) => {
        if(resp.data.code==200){
          this.$message('分配成功');
        }else{
          this.$message(resp.data.msg);
        }
      });
    },
    showAllocateMenuDialog(index, row) {
      this.rid=row.rid;
      this.dialogFormVisibleMenu = true;
      //查询当前角色所有的菜单mid
      this.$axios.get("/menu/getMidsByRid/" + row.rid).then((resp) => {
        // this.menucheckedkeys = resp.data.data;
        //ES6新增语法
        // for(let i=0;i<resp.data.data.length;i++){
        //     console.log(resp.data.data[i]);
        //     console.log(this.$refs.menutree.getNode(resp.data.data[i]))
        // }
        for (let mid of resp.data.data) {
          // console.log(mid);
          // console.log(this.$refs.menutree.getNode(mid))
          //获取所有的叶子节点
          if (this.$refs.menutree.getNode(mid).isLeaf) {
            this.menucheckedkeys.push(mid);
          }
        }
        console.log(this.menucheckedkeys);
        this.$refs.menutree.setCheckedKeys(this.menucheckedkeys);
      });
    },
    getAllRoles() {
      this.$axios.get("/role/getAll").then((resp) => {
        this.roles = resp.data.data;
      });
    },
    loadMenu() {
      this.$axios.get("/menu/getAll").then((resp) => {
        if (resp.data.code == 200) {
          this.menus = resp.data.data;
        }
      });
    },
  },
};
</script>

<style>
</style>